﻿@page "/barcodes/qr-code"

@using Syncfusion.Blazor.BarcodeGenerator

@inherits SampleBaseComponent;

<SampleDescription>
     <p>This sample displays a machine-readable optical label that contains information about the item to which it is attached. The information may be a location, a URL, an address book, etc.</p>
</SampleDescription>
<ActionDescription>
   <p>This example shows how to display a URL as the optical label using the Barcode component. The `Type` property can be used to set the barcode type as one-dimensional or two-dimensional.The `Version` property is used to set the version of the QR barcode. Also, the Barcode component provides support to set the error correction level on a QR-type barcode by using the `ErrorCorrectionLevel` property.</p>
</ActionDescription>

<div class="control-section" style="width: 100%;height: 590px;">
    <div class="center">
        <div class="centercontrol">
            <SfQRCodeGenerator Width="200px" Height="150px" Value="Syncfusion">
                <QRCodeGeneratorDisplayText Visibility="false"></QRCodeGeneratorDisplayText>
            </SfQRCodeGenerator>
        </div>
    </div>
</div>

<style>
    .centercontrol {
        margin: auto;
        width: 50%;
        padding-left: 18%;
        height: 50%;
    }

    .allowedText {
        margin-left: 14px;
        margin-right: 17px;
        margin-top: 14px;
        width: auto;
        height: auto;
    }


    .center {
        margin-left: 14px;
        margin-right: 17px;
        margin-top: 14px;
        min-width: 280px;
        width: auto;
        border: 2px solid lightgray;
        min-height: 40%;
        padding-top: 35px;
    }
</style>

